<template>
  <div class="dashboard-container" id="order-app">
    <el-table :data="tableData" stripe class="tableBox">
      <el-table-column prop="number" label="订单号"></el-table-column>
      <el-table-column label="订单状态">
        <template #default="{ row }">
          {{ getOrderType(row) }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
      <el-table-column prop="orderTime" label="下单时间"></el-table-column>
      <el-table-column prop="amount" label="实收金额">
        <template #default="{ row }">￥{{ row.amount }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="goDetail(row)" class="blueBug">查看</el-button>
          <el-divider v-if="row.status === 2" direction="vertical" />
          <el-button v-if="row.status === 2" type="text" @click="cancelOrDeliveryOrComplete(3, row.id)" class="blueBug">派送</el-button>
          <el-divider v-if="row.status === 3" direction="vertical" />
          <el-button v-if="row.status === 3" type="text" @click="cancelOrDeliveryOrComplete(4, row.id)" class="blueBug">完成</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        v-model:page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        v-model:current-page="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!-- 查看弹窗 -->
    <el-dialog title="订单信息" v-model="dialogVisible" width="30%">
      <div class="info-box">
        <div class="item-box"><span class="label">订单号：</span><span class="des">{{ diaForm.number }}</span></div>
        <div class="item-box"><span class="label">订单状态：</span><span class="des">{{ getOrderType(diaForm) }}</span></div>
        <div class="item-box"><span class="label">收货人：</span><span class="des">{{ diaForm.consignee }}</span></div>
        <div class="item-box"><span class="label">联系电话：</span><span class="des">{{ diaForm.phone }}</span></div>
        <div class="item-box"><span class="label">地址：</span><span class="des">{{ diaForm.address }}</span></div>
        <div class="item-box"><span class="label">支付金额：</span><span class="des">{{ diaForm.amount }}</span></div>
        <div class="item-box"><span class="label">下单时间：</span><span class="des">{{ diaForm.orderTime }}</span></div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getOrderDetailPage, editOrderDetail } from '@/api/order'

const tableData = ref([])
const counts = ref(0)
const page = ref(1)
const pageSize = ref(10)
const input = ref('')
const orderTime = ref(['', ''])
const beginTime = ref('')
const endTime = ref('')
const dialogVisible = ref(false)
const diaForm = ref({})

// 获取订单类型
const getOrderType = (row) => {
  switch (row.status) {
    case 1: return '待付款'
    case 2: return '正在派送'
    case 3: return '已派送'
    case 4: return '已完成'
    case 5: return '已取消'
    default: return ''
  }
}

// 查询数据
const init = async () => {
  try {
    const res = await getOrderDetailPage({
      page: page.value,
      pageSize: pageSize.value,
      number: input.value || undefined,
      beginTime: beginTime.value || undefined,
      endTime: endTime.value || undefined
    })
    if (res.code === 1) {
      tableData.value = res.data.records || []
      counts.value = res.data.total
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (err) {
    ElMessage.error('请求出错了：' + err)
  }
}

// 搜索事件
const handleQuery = () => {
  page.value = 1
  init()
}

// 查看详情
const goDetail = (row) => {
  diaForm.value = { ...row }
  dialogVisible.value = true
}

// 修改订单状态
const cancelOrDeliveryOrComplete = async (status, id) => {
  try {
    await ElMessageBox.confirm('确认更改该订单状态?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const res = await editOrderDetail({ status, id })
    if (res.code === 1) {
      ElMessage.success(status === 3 ? '订单已派送' : '订单已完成')
      init()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (err) {
    ElMessage.error('请求出错了：' + err)
  }
}

// 分页逻辑
const handleSizeChange = (val) => {
  pageSize.value = val
  init()
}
const handleCurrentChange = (val) => {
  page.value = val
  init()
}

onMounted(() => {
  init()
})
</script>

<style scoped>
/* 可保留原有样式或提取至 global.css */
</style>
